Navigation

Navigation in @tata1mg/router is based on react-router-v6, and client side navigation can be achieved through components like <Navigate> or <Link> or through hooks like useNavigate.

Example :

import { useNavigate } from "@tata1mg/router";

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/session-timed-out");
    }
  }, [userIsInactive]);
}

Navigation inside clientFetcher function can be achieved through the navigate property which is available as an argument in clientFetcher.

Home.clientFetcher = async ({navigate}) => {
  navigate("/about")
}

Navigation inside serverFetcher function can also be achieved through the navigate property which is available as an argument in serverFetcher. navigate available inside server fetcher is a wrapper around response.send() so it would result it server side navigation.

Home.serverFetcher = async ({navigate}) => {
  navigate("/about")
  //will be navigated to /about on the server
}